<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="450" height="420" style="border:1px solid #d3d3d3;"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // Style
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  
  // Define square geometry
  const outerX = 100;
  const outerY = 50;
  const outerSize = 250;
  const thickness = 16;
  const innerX = outerX + thickness;
  const innerY = outerY + thickness;
  const innerSize = outerSize - 2 * thickness;

  // Draw outer square
  ctx.beginPath();
  ctx.rect(outerX, outerY, outerSize, outerSize);
  ctx.stroke();

  // Draw inner square
  ctx.beginPath();
  ctx.rect(innerX, innerY, innerSize, innerSize);
  ctx.stroke();

  // Draw labels
  ctx.font = '24px serif';
  ctx.fillText('A', outerX - 28, outerY + 10);
  ctx.fillText('B', outerX + outerSize + 8, outerY + 10);
  ctx.fillText('C', outerX + outerSize + 8, outerY + outerSize + 10);
  ctx.fillText('D', outerX - 28, outerY + outerSize + 10);

  // Draw the dots inside the vertical tubes
  const dotRadius = 2.2;
  const numDots = 21;
  const marginY = 15;
  const dotAreaHeight = innerSize - 2 * marginY;
  const dotSpacing = dotAreaHeight / (numDots - 1);

  // Dots on the left side (AD)
  const leftDotX = outerX + thickness / 2;
  for (let i = 0; i < numDots; i++) {
    ctx.beginPath();
    ctx.arc(leftDotX, innerY + marginY + i * dotSpacing, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
  }

  // Dots on the right side (BC)
  const rightDotX = outerX + outerSize - thickness / 2;
  for (let i = 0; i < numDots; i++) {
    ctx.beginPath();
    ctx.arc(rightDotX, innerY + marginY + i * dotSpacing, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
  }

  // Draw ground
  const groundY = outerY + outerSize;
  ctx.beginPath();
  ctx.moveTo(outerX - 60, groundY);
  ctx.lineTo(outerX + outerSize + 60, groundY);
  ctx.stroke();

  // Draw hatching for the ground
  ctx.lineWidth = 1.5;
  const hatchLength = 15;
  const hatchSpacing = 12;
  for (let x = outerX - 60; x < outerX + outerSize + 60; x += hatchSpacing) {
    ctx.beginPath();
    ctx.moveTo(x, groundY);
    ctx.lineTo(x - 8, groundY + hatchLength);
    ctx.stroke();
  }

  // Draw caption
  ctx.font = '24px "KaiTi", "SimSun", serif';
  ctx.textAlign = 'center';
  ctx.fillText('图 1', canvas.width / 2, groundY + 70);

</script>
</body>
</html>